<!--
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-09 13:43:03
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-11 16:50:44
 * @FilePath: \project-my\nuxt3-app-pro\pages\home\index.vue
 * @Description: 
-->
<template>
    <div>
        {{ number }}----{{ $t('hello home page', { messageText }) }}
        <button @click="number++" class="btn">{{ $t('click') }}</button>
        <button @click="junmp" class="btn">go other page</button>
        <ElButton>element-plus</ElButton>
        <el-button type="primary" @click="goBack">{{ $t('back') }}</el-button>

        <div class="card">
            <el-button @click="ElMessage('hello')">button</el-button>
            <ElButton :icon="ElIconEditPen" type="success">button</ElButton>
            <LazyElButton type="warning">lazy button</LazyElButton>
        </div>

        <div class="card">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
const { t } = useI18n()
const router = useRouter()
const number = ref(0)
const messageText = ref('hello home page!')
const tableData = ref([
    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
    { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
    { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
])

const goBack = () => {
    router.go(-1)
}
const junmp = () => {
    console.log('router', router)
    router.push({
        path: '/my',
        query: {
            id: '233'
        }
    })
    // router.push({
    //     name: 'my',
    //     params: {
    //         string: '233'
    //     }
    // })
}

// function useI18n(): { t: any; } {
//     throw new Error('Function not implemented.');
// }
</script>

<style scoped lang="scss">
.btn {
    background-color: #74cb77;
}

.card {
    margin-top: 50px;
}
</style>